@charset "utf-8";
@import "common/_reset.scss";
@import "common/_common.scss";
$p-color:#838383;
@mixin content_index{
    width: 100%;
    padding:0,49px,0,50px;
}

fieldset{
    border:1px solid #00B7EE;
    width: 143px;
    margin: 0 auto;
    box-sizing:border-box ;
    h2{
        font-weight: initial;
        text-align: center;
    }
    p{
        line-height: 14px;
        font-size: 16px;
        padding-bottom: 5px;
        text-align: center;
        text-transform:uppercase ;
    }
}
.about_me,.protfolio,.link{
    @include content_index;
}
.about_me{
    height: 482px;
    padding-top:17px ;
    padding-bottom: 10px;
    background: #fafafa;
    text-align: center;
    box-sizing: border-box;
    >div{
        background: #f2f2f2;
        vertical-align: top;
        margin: 21px 0 15px;  
        p:last-of-type{
            font-size: 12px;
            text-align: justify;
            width: 245px;
            margin: 0 auto;
            color: $p-color;
            line-height: 25px;
            letter-spacing: 2px;
        }  
    }
    >div:nth-of-type(1){
        display: inline-block;
        width: 267px;
        height:319px;
        margin-right: 20px; 
    }
    >div:nth-of-type(2){
        display: inline-block;
        width: 323px;
        height:319px;
        margin-right: 21px;
        p:last-of-type{
            width: 250px;
        }
    }
    >div:nth-of-type(3){
        display: inline-block;
        width: 271px;
        height:319px;
    }
}

.protfolio{
    height: 661px;
    text-align: center;
    >div{
        display: inline-block;
        margin-top: 22px;
        >div{
            border:1px solid black;
            overflow:hidden;
            img{
                width:100%;
                vertical-align:middle;
            }
        }
        p{
            font-size: 12px;
            color:#3d3d3d;
            margin-top: 15px;
        }
        a{
            @include a-button;
        }
    }
}

.widthfix{
    width: 128px;
    margin: 14px auto 12px;
    img{
        width: 100%;
        vertical-align: middle;
        border-radius:50% ;
    }
}

.middle{
    margin-bottom: 10px;
}
.link{
    text-align: center;
    height: 306px;
    position: relative;
    background:rgba(0,0,0,.5);
    padding-top:17px;
    margin-bottom: 27px;
    >div:last-of-type{
        margin-right:0;
    }
}
.link_title{
    left: auto;
    color:white;
}
.bgfix{
    position: absolute;
    width: 1000px;
    height:306px;
    left:0;
    top:0;
    img{
        position: inherit;
        width: 100%;
        height: 100%;
        overflow: hidden;
        left:-3px;
        top:2px;
        z-index: -99;
        vertical-align: middle;
    }
}
.left,.right{
    position: absolute;
    display: inline-block;
    width: 37px;
    height:69px;
    background:rgba(0,0,0,.5); 
    line-height: 69px;
    top:117px;
}
.left{
    left:7px;
}
.right{
    right: 7px;
}
.left img,.right img{
    vertical-align: middle;
}
.imgfix{
    display: inline-block;
    width: 222px;
    height:81px;
    margin-top: 43px;
    margin-right: 22px;
    a{
        position: relative;
        z-index: 99;
    }
    img{
        width: 100%;
        height: 100%;
        vertical-align: middle;
    }
}

